<template>
  <div class="warp margin-bottom-20" :class="[isMine?'isMine':'no-isMine']">
    <!--        <avatar :src="avatar" :type="conversation.type"/>-->
    <div class="left">
      <div class="header flex color-grey" :class="{'m-header' : isDesMobile}">
        <div class="name text-ellipsis padding-right-10">{{ from }}</div>
        <div class="date">{{ date }}</div>
      </div>
      <!-- {{message}} {{isMine}} -->
      <!--            message content-->
      <!-- {{contentList}} -->
      <div :class="[isMine?'isMine':'no-isMine']" class="margin-top-bottom-10 contentBox">
        <template v-for="(item, index) in contentList">
          <span v-if="item.name === 'text'" :key="index">{{ item.text }}</span>
          <!-- {{item.imageUrl}} -->
          <img v-if="message.type === 'TIMFaceElem'" style="width:20px;height:auto" :src="item" alt="" srcset=""></img>
          <img v-if="message.type === 'TIMImageElem'" style="width:100px;height:auto" :src="item.imageUrl" alt="" srcset="">
          <img v-if="item.name === 'img'" :key="index" :src="item.src" width="20px" height="20px">
        </template>
        <div :class="[isMine?'triangle-right':'triangle-left']" />
      </div>
    </div>
    <div class="right">
      <div class="wrapperimage" style="width: 50px;height: 50px;border-radius: 100%;margin-top:10px;">
        <!--                <img :src="userImage" alt="" style="width: 50px;height: 50px;border-radius: 100%"/>-->
        <el-image
          style="width: 35px; height: 35px;border-radius: 100%;"
          :src="userImage||defaultImage"
          :fit="userImage?'fill':'contain'"
        />
      </div>
    </div>

  </div>

</template>

<script>
import { emojiUrl, emojiMap, emojiName } from './emojiMap'
import { isToday, getDate, getTime, getFullDate } from '@/tim/date'
import messageStoreMixin from '@/store/message/messageStoreMixin';
import { decodeText } from './decodeText';
import defaultImage from '@/assets/images/avatar.png'
import { mapGetters } from 'vuex';
import { getLoginUser } from '@/tim';

export default {
  name: 'MessageItemItem',
  components: { avatar: () => import('./avatar') },
  mixins: [messageStoreMixin],
  props: ['message'],
  computed: {
    ...mapGetters('mobile', [
      'isDesMobile'
    ]),
    toUserImage () {
      return this.currentConversation &&
                    this.currentConversation.userProfile &&
                    this.currentConversation.userProfile.avatar
    },
    userImage () {
      var userid = this.message.from
      var user = getLoginUser()
      console.log(user)
      if (user.businessUserId == userid || user.id == userid) {
        return user.avatar
      }
      return this.message && this.message.avatar || this.toUserImage
    },
    contentList () {
      if (this.message.type == 'TIMImageElem') {
        return this.message && this.message.payload && this.message.payload.imageInfoArray.filter((item) => { return item.type === 0 })
      } else if (this.message.type == 'TIMFaceElem') {
        const arr = []
        for (const key in this.emojiMap) {
          if (key == this.message.payload.data) {
            arr.push(this.emojiUrl + this.emojiMap[key])
          }
        }
        return this.message && this.message.payload && arr
      } else {
        return this.message && this.message.payload && decodeText(this.message.payload)
      }
    },
    from () {
      const isC2C = this.currentConversation.type === window.TIM.TYPES.CONV_C2C
      // console.log(this.currentUser)
      // 自己发送的用昵称渲染
      if (this.isMine) {
        return this.currentUser.company ||
                        this.currentUser.nick ||
                        this.currentUser.userID ||
                        this.currentUser.mobilePhone ||
                        this.currentUser.id
      }
      // 1. C2C 的消息体中还无 nick / avatar 字段，需从 conversation.userProfile 中获取
      if (isC2C) {
        return (
          this.currentConversation.userProfile.company ||
                        this.currentConversation.userProfile.nick ||
                        this.currentConversation.userProfile.userID ||
                        this.currentConversation.userProfile.mobilePhone
        )
      } else if (this.currentConversation.type === window.TIM.TYPES.CONV_SYSTEM) {
        return this.message.type === window.TIM.TYPES.MSG_GRP_SYS_NOTICE
          ? '群系统通知'
          : '系统通知'
      }
      // 2. 群组消息，用消息体中的 nick 渲染。nameCard暂时支持不完善
      return this.message.nick || this.message.from
    },
    date () {
      return getFullDate(new Date(this.message.time * 1000))
    },
    isMine () {
      // console.log(this.currentUserProfile, this.currentConversation);
      return this.message.flow === 'out'
    },
  },
  data () {
    return {
      popoverVisible: false,
      hasMessageAtMe: false,
      defaultImage: defaultImage,
      emojiUrl,
      emojiMap,
      emojiName,
    }
  },
}
</script>

<style scoped>
    .isMine {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        justify-content: flex-end;
    }

    .contentBox.isMine {
        padding: 10px;
        background-color: #5cadff;
        margin-right: 10px;
        border-radius: 5px 0px 5px 5px;
        color: #fff;
        position: relative;
        display: inline-flex;
        float: right;
    }

    .contentBox.no-isMine {
        padding: 10px;
        color: #222;
        background-color: #fff;
        margin-right: 10px;
        border-radius: 5px 5px 5px 0px;
        position: relative;
        margin-left: 10px;
        border: 1px solid #ddd;
        display: inline-flex;
        float: left;
    }

    .no-isMine {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row-reverse;
    }

    .m-header {
        font-size: 12px;
    }
</style>
